<template>
  <div>
    <tableComponents
      :isHaveExport="false"
      :isShow="false"
      :isHavePagination="false"
      @toAdd="editBtn()"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="用户信息" min-width="160">
            <template slot-scope="scope">
              <div class="fx" style="justify-content: flex-start">
                <div class="tc" style="margin-right: 20px">
                  <img
                    style="width: 50px; height: 50px"
                    :src="imgError(scope.row.avatar)"
                    class="user_img"
                  />
                </div>
                <div class="user_table">
                  <p>
                    <span>账号/手机号：</span>
                    <small>{{ scope.row.username || "---" }}</small>
                  </p>
                  <p>
                    <span>昵称：</span>
                    <small>{{ scope.row.nickname || "---" }}</small>
                  </p>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="红包信息" min-width="140">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>名称：</span>
                  <small>{{ scope.row.rid_cn || "---" }}</small>
                </p>
                <p>
                  <span>数量：</span>
                  <small>{{ scope.row.number || "---" }}</small>
                </p>
                <p>
                  <span>已赠送：</span>
                  <small>{{ scope.row.send || "---" }}</small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="140" align="center">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                @click="editBtn(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="deleteNew(scope.row.id)"
                type="danger"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      title="审核"
      :modal-append-to-body="false"
      :visible.sync="show_edit"
      class="tl size_13"
      width="600px"
    >
      <el-form label-width="120px">
        <el-form-item label="用户账号">
          <el-col :span="18">
            <el-input
              placeholder="请选择用户账号"
              v-model="editInfo.username"
              disabled
              size="small"
            ></el-input>
          </el-col>
          <!-- <el-col :span="4" :offset="1">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="primary"
              @click="xzshop('xz_user')"
            >
              选择
            </el-button>
          </el-col> -->
        </el-form-item>

        <el-form-item label="优惠券">
          <el-col :span="18">
            <el-input
              v-model="editInfo.rid_cn"
              size="small"
              disabled
            ></el-input>
          </el-col>
          <el-col :span="4" :offset="1" v-if="!editInfo.id">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="primary"
              @click="xzshop('xz_packet')"
            >
              选择
            </el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="数量">
          <el-col :span="18">
            <el-input v-model="editInfo.number" size="small"></el-input>
          </el-col>
        </el-form-item>

        <div class="tc">
          <el-button
            :loading="$store.state.isLoading"
            size="small"
            @click="checkBtn"
          >
            确定
          </el-button>
        </div>
      </el-form>
    </el-dialog>

    <keep-alive>
      <component
        :is="current"
        :show="show_xz"
        :isAll="false"
        showType="list"
        :types="current == 'xz_packet' ? '2' : '4'"
        @sendShop="getSend"
        @isshow="getShow"
      ></component>
    </keep-alive>
  </div>
</template>

<script>
import xz_packet from "@/components/currency/xz_packet.vue";
import xz_user from "@/components/currency/xz_user.vue";
export default {
  data() {
    return {
      searchAll: {},
      loading: false,
      list: [],
      editInfo: {},
      show_edit: false,
      current: "",
      show_xz: false,
    };
  },
  components: {
    xz_user,
    xz_packet,
  },
  created() {
    this.getNewsAll();
  },
  methods: {
    xzshop(str) {
      this.current = str;
      this.show_xz = true;
    },
    getShow(val) {
      this.show_xz = val;
    },
    getSend(row) {
      if (this.current == "xz_user") {
        this.editInfo.username = row.username;
        this.editInfo.uid = row.id;
      } else if (this.current == "xz_packet") {
        if (row.types != 2) {
          this.$fnc.alertError("请选择权益红包");
        }
        this.editInfo.rid_cn = row.title;
        this.editInfo.rid = row.id;
      }
    },
    deleteNew(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id: id };
          this.$api.getStation.equity_coupon_del(data).then((res) => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess({ text: "操作成功" });
              this.getNewsAll(this.searchAll);
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        }
      });
    },
    checkBtn() {
      var params = JSON.parse(JSON.stringify(this.editInfo));
      if (params.id) {
        this.$api.getStation.equity_coupon_saveedit(params).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess({ text: "编辑成功" });
            this.getNewsAll(this.searchAll);
            this.show_edit = false;
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result);
          }
        });
      } else {
        this.$api.getStation.equity_coupon_saveadd(params).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess({ text: "添加成功" });
            this.getNewsAll(this.searchAll);
            this.show_edit = false;
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result);
          }
        });
      }
    },
    editBtn(item) {
      if (item) {
        this.editInfo = {
          id: item.id,
          uid: item.id,
          username: item.username,
          rid: item.rid,
          rid_cn: item.rid_cn,
          number: item.number,
        };
      } else {
        this.editInfo = {
          uid: this.$route.query.id,
          username: this.$route.query.username,
        };
      }
      this.show_edit = true;
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      params.id = this.$route.query.id;
      this.$api.getStation.equity_coupon_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      return item;
    },
  },
};
</script>

<style>
</style>